@import '@/styles/utils';

.product {
  font-size: px2rem(13);

  &:hover {
    background-color: #f4f0ea;
    box-shadow: 4px 0 4px #888888;

    .img {
      display: none !important;
    }
    .altImg {
      display: inline-block !important;
    }
  }
  .header {
    display: inline-block;
    margin-bottom: px2rem(8);
    .img {
      width: 100%;
      height: 100%;
      display: inline-block;
    }

    .altImg {
      width: 100%;
      height: 100%;
      display: none;
    }
  }

  .content {
    line-height: 1;
    text-align: center;
    font-size: px2rem(13);
    position: relative;

    .title {
      width: px2rem(166);
      margin: 0 auto;
      max-height: px2rem(40);
      line-height: px2rem(20);
      overflow: hidden;
      font-weight: bold;
      margin-bottom: px2rem(4);
      color: #333;
      text-decoration: none;
    }

    .tags {
      margin-bottom: px2rem(4);
      display: flex;
      justify-content: center;
      align-items: center;

      .tag {
        display: inline-block;
        line-height: px2rem(20);
        padding: 0 px2rem(5);
        background-color: #f28f2d;
        font-size: px2rem(12);
        margin-right: px2rem(6);
        color: #fff;
      }
    }

    .price {
      margin-top: px2rem(8);
      color: #d4282d;
      margin-bottom: px2rem(9);
      font-size: px2rem(13);

      .price__old {
        margin-left: px2rem(6);
        color: #999;
        text-decoration: line-through;
        font-size: px2rem(12);
      }
    }
  }
}
